<template>
  <div class="container">

    <TopicList></TopicList>

    <CardBar></CardBar>

  </div>
</template>

<script>

import {getBillboard} from '@/api/billboard'
import CardBar from "@/views/card/CardBar"
import PostList from '@/views/post/Index'
export default {
  name: 'Home',
  components: {CardBar, TopicList: PostList},
  data() {
    return {
      billboard: {
        content: ''
      }
    }
  },
  created() {
    this.fetchBillboard()
  },
  methods: {
    async fetchBillboard() {
      getBillboard().then((value) => {
            const { data } = value
            this.billboard = data
          }
      )
    }
  }
}
</script>
<style scoped>
.container{
  margin: auto;
  margin-top: 64px;
  width: 70%;
  display: flex;
}




@media (max-width: 768px) {
  /*.wrapper .header{*/
  /*  width: 100%;*/
  /*}*/
  .container {
    width: 100%;
    display: block;
    margin: auto;
    margin-top: 64px;
  }
  /*.topic-section{*/
  /*  background-color: #fff;*/
  /*  width: 100%;*/
  /*}*/
  /*.right-side{*/
  /*  margin-top: 5%;*/
  /*  width: 100%;*/
  /*}*/
}
</style>
